<template>
	<view>
		<!-- 商品管理 -->
		<view class="tab_nav">
			<view class="navBar" v-for="(item,index) in navList" :key="index">
				<view :class="{'active':isActive == index}" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="nav-item" v-if="isActive == 0">
			<fenlei></fenlei>
		</view>
		<view class="nav-item" v-if="isActive == 1">
			<fenlei></fenlei>
		</view>
	</view>
</template>

<script>
import fenlei from '../../components/fenlei/fenlei.vue'
export default {
	components:{ fenlei },
	data() {
		return {
		  isActive:0,
		  navList:[
			  {
				  index:0,
				  title:'在售中'
			  },
			  {
				  index:1,
				  title:'仓库中'
			  }
		  ]
		}
	},
	methods: {
		checked(index){
			this.isActive = index
		}
	}
}
</script>
<style>
	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #E5E5E5;
	}
	.tab_nav .navBar {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #666666;
	}
	.active {
		color: #1A1A1A;
		font-weight: 600;
		background: #FEB140;
	}
</style>
